<template>
  <div class="login">
    <p>登录</p>
    <input placeholder="请输入用户名" type="text" class="username" v-model="loginName" />
    <input placeholder="请输入密码" type="password" class="userpasd" v-model="loginPasd" />
    <button @click="loginbtn">登录</button>
    <div class="login_bottom">
      <span>忘记密码？</span>
      <span @click="btn">注册</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginName: "",
      loginPasd: ""
    };
  },
  methods: {
    btn() {
      this.$router.push({
        path: "/register"
      });
    },
    loginbtn() {
      if (this.loginName == "") {
        this.$layer.msg("请输入用户名");
      } else if (this.loginPasd == "") {
        this.$layer.msg("请输入密码");
      } else if (this.loginPasd.length <= 5) {
        this.$layer.msg("请输入6位以上密码");
      } else {
        this.$axios
          .get("http://jx.xuzhixiang.top/ap/api/login.php", {
            params: {
              username: this.loginName,
              password: this.loginPasd
            }
          })
          .then(obj => {
            console.log(obj);
            if (obj.data.msg == "登录成功") {
              this.$store.commit("state_token", obj.data.data.token);
              this.$store.commit("state_id", obj.data.data.id);
              this.$router.push({
                path: "/home"
              });
            } else if (obj.data.code == 0) {
              this.$layer.alert(obj.data.msg);
            }
          });
      }
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.login {
  width: 100%;
}
.login p {
  width: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  color: #000;
}
.username,
.userpasd {
  width: 80%;
  margin-left: 10%;
  line-height: 45px;
  border: 1px solid #999;
  font-size: 14px;
  color: #666;
  text-indent: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  outline: none;
}
button {
  width: 80%;
  margin-left: 10%;
  line-height: 45px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: darkblue;
  border: 0;
  border-radius: 5px;
  outline: none;
}
.login_bottom {
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
}
.login_bottom span {
  line-height: 45px;
  font-size: 14px;
  color: #888;
  padding-left: 20px;
}
.login_bottom span:nth-of-type(2) {
  padding-right: 20px;
}
</style>